<template>
  <div class="header" :class="{ white: model.getWhite() }">
    <i class="icon iconfont icon-arrow-left flash on" @click="onBack" />
    <i class="icon iconfont icon-sami-select flash" @click="onMin" />
    <img :src="plugin.img" class="img" />
    <div class="box">
      <div class="title">{{ plugin.name }}</div>
      <div class="content">{{ plugin.content }}</div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import app from '@/app'
import model from './model'

export default {
  setup() {
    // 当前插件信息
    const plugin = ref({})

    const updatePlugin = () => {
      plugin.value = {
        img: app.plugin.index.img(),
        name: app.plugin.index.name(),
        content: app.plugin.index.content()
      }
    }

    // 退出插件
    const onBack = () => {
      // 回到主页
      app.route.to('/account')
    }

    // 最小化插件
    const onMin = () => {
      app.window.min()
    }

    // 关闭白色模式，当前还未完善白色模式，还有最近插件层的白色模式
    model.white(false)
    
    // 更新插件信息
    updatePlugin()

    return {
      plugin,
      model,
      onBack,
      onMin,
      updatePlugin
    }
  }
}
</script>